<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.ok{
				color: green;
			}
			.error{
				color: red;
			}
		</style>
		<script>
			function zhanghao(){
				var reg=/^\w{5,10}$/;
				var name=document.getElementById("name").value;
				var span=document.getElementById("text1");
				var result=name.match(reg);
				console.log(result);
				if(result){
					span.className="ok";
				}else{
					span.className="error";
				}
				
			}
			function mima(){
				var reg=/^\w{10,20}$/;
				var name=document.getElementById("password").value;
				var span=document.getElementById("text2");
				var result=name.match(reg);
				if(result){
					span.className="ok";
				}else{
					span.className="error";
				}
				
			}
		</script>
	</head>
	<body>
	<table>
		<tr>账号：</tr>
		<tr>
		<input type="text" id="name" onblur="zhanghao()" maxlength="15" />
		</tr>
		<span id="text1" > 5-10位字母、数字、下划线</span>	
		<br />
		<br />
		<tr>密码：</tr>
		<tr>
			<input type="text" id="password"  onblur="mima()" maxlength="25" />
		</tr>
		<span id="text2" > 10-20位字母、数字、下划线</span>
	</table>
	</body>
</html>
